<template>
  <div class="menuBar">
    <div class="left">
      <slot name="bar-left">
        <img :src="require('@/assets/logo.png')" />
        <p class="title">web框架</p>
      </slot>
    </div>

    <div class="middle">
      <slot name="bar-middle">
        <input
          class="searchInput"
          type="search"
          name="搜索"
          required
          placeholder="请输入搜索关键字"
          lang="zh-CN"
          @keypress="showSearch"
        />
      </slot>
    </div>

    <div class="right">
      <slot name="bar-right">
        <img :src="require('@/assets/headImage.png')" />
        <p class="uerName">用户名</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ocn-menu-bar",
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    showSearch($event) {
      console.log("打印搜索框事件对象：", $event);
      console.log("打印搜索框输入值：", $event.target.value);
    },
  },
};
</script>

<style scoped>
.menuBar {
  width: 100%;
  padding: 6px;
  align-self: stretch;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  flex-grow: 0;
}

.left {
  flex: 3;
  height: 40px;
  line-height: 40px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.left img {
  height: 40px;
  width: 40px;
}

.left .title {
  color: #2c3e50;
  font-size: 30px;
  font-weight: 600;
}

.middle {
  flex: 14;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.middle .searchInput {
  height: 30px;
  padding: 5px;

  border: none;
  outline: none;
  border-radius: calc(10px);

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.right {
  flex: 2;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.right img {
  height: 30px;
  width: 30px;
  margin: 0 10px;
}

.right .uerName {
  font-size: 16px;
}
</style>
